<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>计数器：{{count}}</h1>
        <button v-on:click="increatment">累加</button>
        <!-- v-on可以简写成@ -->  
        <!--  -->
        <button @click="addN(5)">每次加n</button>
    </div>
    <script>
    const vm = new Vue({
        el:'#app',
        data(){
          return{
            count:0,
            // increatment(){  //函数方法不能写在data中，原因：1.data中是书写数据的
            //                 //  2.data中的this指向window 方法中需要用到数据 但是数据存放在实例化对象中.而此方法中的this指向window 无法对数据进行操作            
            //     console.log(this);
            // }
          }
        },
         methods:{
            increatment(){             
                console.log(this); //此时方法中的this指向实例化对象
                this.count++
            },
            addN(n){
                this.count+=n
            }
          }
    })
</script>
</body>

</html>